<template>
  <div class="index">
    <div>
      <h2>swiper轮播图</h2>
      <div class="lunbo">
        <swiper :options="swiperOptions">
          <swiper-slide>
            <img src="http://p1.music.126.net/Y6gItVxUvkbvI2cC8KVZYA==/109951166461233203.jpg?imageView&quality=89">
          </swiper-slide>
          <swiper-slide>
            <img src="http://p1.music.126.net/ypjEcAl-BXKqb2UWdau-Tw==/109951166463199078.jpg?imageView&quality=89">
          </swiper-slide>
          <swiper-slide>
            <img src="http://p1.music.126.net/_7zX4BjboCYo4KYRvpayDg==/109951166461246383.jpg?imageView&quality=89">
          </swiper-slide>
          <swiper-slide>
            <img src="http://p1.music.126.net/3Vwphalm49ewNV-lIJUBNA==/109951166461279853.jpg?imageView&quality=89">
          </swiper-slide>
          <!-- 分页器 -->
          <div class="swiper-pagination" slot="pagination"></div>
          <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
          <div class="swiper-button-prev" slot="button-prev"></div>
          <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <div>
      <h2>测试1</h2>
      <div class="test">
        <p ref="msg">msg:{{ message }}</p>
        <p>msg1:{{ message1 }}</p>
        <button @click="changeMessage">改变message</button>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      message: "hello",
      message1: "",
      // 定义swiper的配置选项
      swiperOptions: {
        // 指定分页器
        pagination: {
          //指定分页器的容器
          el: ".swiper-pagination",
          //点击分页器的指示点分页器会控制Swiper切换
          clickable: true
        },
        // 配置衔接滑动
        loop: true,
        // 配置自动播放
        // autoplay:true
        autoplay: {
          //自动播放
          autoplay: true,
          //设置间隔时间
          delay: 3000,
          // 用户操作swiper之后，是否禁止autoplay
          disableOnInteraction: false
        },
        // slide的切换效果
        effect: 'coverflow',
        // 箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      },
    };
  },
  methods: {
    changeMessage() {
      this.message = "你好啊同学！";
      console.log(this.$refs.msg.innerHTML);
      // vue是异步渲染的框架，数据更新是异步的，数据更新之后，dom是不会立即渲染
      this.message1 = this.$refs.msg.innerHTML;
      // this.$nextTick(() => {
      //   this.message1 = this.$refs.msg.innerHTML;
      // })

    },

  }
};
</script>
<style>
.test {
  width: 800px;
  height: 320px;
  border: solid;
}
.index {
  border: 1px solid red;
  padding: 10px;
}
.index .lunbo {
  /* box-sizing: content-box; */
  width: 800px;
  height: 320px;
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #ecb141; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
}
.index .lunbo img {
  width: 800px;
  height: 320px;
}
</style>
